package myJs.cps

import myJs.api.Api
import myJs.myPkg.Lightbox
import myJs.tool.Tool
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.core.facade.React
import slinky.web.html._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object ImageViewNoLightboxCp {

  case class Props(id: String, images: List[String])

  val component = FunctionalComponent[Props] { props =>

    object FTool {

    }

    val images = props.images

    div(style := Style(),
      if (images.nonEmpty) {
        images.zipWithIndex.map { case (uri, curI) =>
          div(key := s"${curI}", style := STool.imgDiv,
            div(style := STool.img(props.id, s"thumb_${uri}"),
              className := "myImgDiv"
            )
          )
        }
      } else div(style := Style(paddingTop = 7), "未上传"),

    )

  }

  object STool {

    val imgWidth = 150
    val imgHeight = 150

    val imgDiv = Style(backgroundRepeat = "no-repeat", backgroundSize = "cover",
     position=csstypeStrings.relative, display = csstypeStrings.`inline-block`, marginRight = 20)

    def img(id: String, fileName: String) = Style(backgroundImage = s"url('${Tool.imageUrl(id, fileName)}')",
      backgroundRepeat = "no-repeat",
      backgroundSize = "cover", width = imgWidth, height = imgHeight, border = "3 px solid #fff",
      boxShadow = " 0 .1rem 1rem .25rem rgba(0,0,0,.05)", borderRadius = "0.475rem")

  }


}
